<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>职位数据分析</title>
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"  href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <link rel="stylesheet" href="../css/searchBar.css"/>
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

 <link href="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
   <link href="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" />
    <!-- jQuery -->
     <script src="../js/jquery.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/distpicker.min.js"></script>
    <script src="../js/e-smart-zoom-jquery.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
     <script type="text/javascript" src="../js/spin.min.js" ></script>
</head>
<body class="hold-transition sidebar-mini">

<div class="wrapper">

    <!-- 搜索框 -->
    <div align="center" style="margin-top: 100px;">
        <div class="btn-group" align="center">
            <div id="distpicker" data-toggle="distpicker">
                <span>区域：</span>
                <select id="province"></select>
                <select id="city"></select>
                <button id="resetBtnId" type="button" class="btn btn-danger">重置</button>
            </div>
        </div>
        <div>
            <form id="searchFormId" class="bs-example bs-example-form" role="form">
                <div class="row">
                    <div class="col-lg-6" style="margin-left: 25%">
                        <div class="input-group">
                            <input id="searchInputId" name="searchContent" type="text" class="form-control"
                                   placeholder="输入关键字搜索">
                            <button id="searchBtnId" class="btn btn-default" type="button">搜索</button>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
            </form>
        </div>
    </div>
    <!--加载中动画框-->
        <div id="Div" align="center">
            <div id="firstDiv" align="center">
            </div>
        </div>
    <!--词云图-->
    <div id="page" align="center" >
        <div id="pageContent" align="center" >
            <img id="imageFullScreen" src="../img/small.jpg"/>
        </div>
    </div>
    <!-- 条形图  -->
    <div id="barChart" style="height:500px;margin-top:0px;" align="center"></div>
   <!--表格数据-->
    <div class="jobTableDiv" style="margin-top:0px;">
			<table id="table"></table>
		</div>

        <!-- Control Sidebar -->
        <aside class="control-sidebar control-sidebar-dark">
            <!-- Control sidebar content goes here -->
        </aside>
        <!-- /.control-sidebar -->
</div>

<!-- ./wrapper -->

<!--搜索框的处理 -->
<script>
    $(function () {
        var defaultProvice = '---- 所在省 ----';
        var defaultCity = '---- 所在市 ----';
        //初始话省份和市
        $('#distpicker').distpicker({
            province: defaultProvice,
            city: defaultCity,
        });
        $("#resetBtnId").click(function () {
            $("#distpicker").distpicker('reset');
        })
        // 搜索的事件监听
        $("#searchBtnId").click(function () {
            var province = $("#province").val();
            var city = $("#city").val();
            if (province == defaultProvice) {
                province = "";
                city = "";
            }

            var searchContent = $("#searchInputId").val();
            if (searchContent.trim() == "") {
                alert("请输入搜索内容！")
                return
            }
            //发送ajax给服务器
            <!--展示加载中-->
            showLoading();
            $.ajax({
                "url": "http://127.0.0.1:5000/search",
                "data": {'searchContent': searchContent, 'province': province, 'city': city},
                "dataType": "json",
                "type": "post",
                "success": function (data) {
                    if (data.status == 1) {
                        <!--关闭加载中-->
                        closeLoading();
                        <!--渲染柱状图和饼状图-->
                        chartsRender(data);
                        alert(data.msg)
                        //修改词云图片
                        $("#imageFullScreen").attr("src", "../../" + data.data.wordCouldImg + "/?time=" + new Date().getTime())
                        $('#page').show();
                        //重新渲染表格数据
                        reloadData(data.data.jobList);

                    }else{
                         <!--关闭加载中-->
                        closeLoading();
                        alert(data.msg);
                        //隐藏
                        $('#page').hide();
                        $(".jobTableDiv").hide();
                        $("#barChart").hide();

                    }
                },
                "error": function () {
                    <!--关闭加载中-->
                    closeLoading();
                    alert("搜索失败！");
                    $('#page').hide();
                    $(".jobTableDiv").hide();
                    $("#barChart").hide();
                }
            })
        })
        $('#page').hide();
           var opts = {
                lines: 13, // 花瓣数目
                length: 20, // 花瓣长度
                width: 10, // 花瓣宽度
                radius: 30, // 花瓣距中心半径
                corners: 1, // 花瓣圆滑度 (0-1)
                rotate: 0, // 花瓣旋转角度
                direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
                color: '#28bda0', // 花瓣颜色
                speed: 1, // 花瓣旋转速度
                trail: 60, // 花瓣旋转时的拖影(百分比)
                shadow: false, // 花瓣是否显示阴影
                hwaccel: false, //spinner 是否启用硬件加速及高速旋转
                className: 'spinner', // spinner css 样式名称
                zIndex: 2e9, // spinner的z轴 (默认是2000000000)
                top: '25%', // spinner 相对父容器Top定位 单位 px
                left: '50%'// spinner 相对父容器Left定位 单位 px
            };
            var spinner = new Spinner(opts);
             function showLoading(){
                //请求时spinner出现
                var target = $("#firstDiv").get(0);
                spinner.spin(target);
            }

            function closeLoading(){
                //关闭spinner
                spinner.spin();
            }
    })

    <!--渲染条状图和饼状图-->

    function chartsRender(data) {

        var pieChart = echarts.init(document.getElementById("barChart"));
        var dataName = [];
        var dataValue = [];
        //后端返回数据中的所有分类词json数组
        var jsonList = data.data.words;
        let sumValue = 0;
        $.each(jsonList, function (index, value) {
            dataName.push(value.name);
            dataValue.push(value.value)
        })
        //获取总数
        $.each(dataValue, function (index, value) {
            sumValue += value;
        });


        option = {
            title: {
                text: '搜索职位数据分析',
                align: 'center',
                top: '5',
                left: '50',
                textStyle: {
                    fontSize: 20,
                    fontStyle: "italic",
                    color: "rgba(15, 16, 15, 1)"
                }
            },
            tooltip: {},
            legend: {
                data: dataName,
                orient: "vertical",
                left: "center",
                name: "饼状图",
                type: "scroll",
                data: ['top10'],
                itemGap: 18.5,
                top: 40,
                textStyle: {
                    color: "rgba(8, 8, 8, 1)",
                    fontWeight: "bold",
                    fontSize: 13,
                    fontStyle: "italic"
                }
            },
            grid: [{
                x: '7%',
                y: '15%',
                width: '38%',
                height: '38%'
            },],
            xAxis: [{
                gridIndex: 0,
                data: dataName
            }],
            yAxis: [{
                gridIndex: 0
            }],
            series: [{
                name: 'top10柱状图',
                type: 'bar',
                data: dataValue,
                itemStyle: {
                    normal: {
                        color: function (param) {
                            let r = Math.floor(Math.random() * 255);
                            let g = Math.floor(Math.random() * 255);
                            let b = Math.floor(Math.random() * 255);
                            let color = 'rgba(' + r + ',' + g + ',' + b + ',0.8)';
                            return color;
                        }
                    }
                },
                label: {
                    fontStyle: "italic",
                    fontWeight: "bold",
                    fontSize: 14
                }
            },
                {

                    type: 'pie',
                    name: 'top10饼状图',
                    data: jsonList,
                    radius: '40%',
                    center: ['70%', '30%'],
                    label: {
                        fontStyle: "italic",
                        fontWeight: "bold",
                        fontSize: 14,
                        normal: {
                            show: true,
                            position: 'outside', //标签的位置
                            textStyle: {
                                fontWeight: 300,
                                fontSize: 16    //文字的字体大小
                            },
                            formatter: '{b} : {c} ({d}%)'
                        }
                    }
                }
            ]
        };

        pieChart.setOption(option);

    }


</script>
<script>
    $(function () {
        window.jobJumpEvent = {
    'click #clickJumEvent': function (e, value, row, index) {
       window.open(row.jobUrl)
     }
   };
        //设置需要显示的列
			var columns = [{
				field: 'Id',
				title: '编号',
                formatter:function(value,row,index){
                //return index+1; //序号正序排序从1开始
                var pageSize=$('#table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                var pageNumber=$('#table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                return pageSize * (pageNumber - 1) + index + 1;    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
            }
			}, {
				field: 'name',
				title: '职位名',
                formatter:function(value, row, index){
                 return '<a id="clickJumEvent" href="#">'+ value +'</a>'
                },
                events:jobJumpEvent
			}, {
				field: 'city',
				title: '城市'
			}, {
				field: 'salary',
				title: '薪水'
			}, {
				field: 'age',
				title: '年龄'
			}, {
				field: 'experienceTime',
				title: '工作经验年长'
			}, {
				field: 'codeName',
				title: '语言'
			}, {
				field: 'edu',
				title: '学历要求'
			}, ];
          var jobList = [];
         //bootstrap table初始化数据
			$('#table').bootstrapTable({
				columns: columns,
				data: jobList,
				//******前端分页设置****
				pagination: true,
				pageNumber: 1,
				pageSize: 10,
				pageList: "[10, 20, 50, 200]",
				paginationHAlign: "left",
				paginationDetailHAlign: "right",
				search: true, //******开启搜索框****//
				searchOnEnterKey: true, //******回车后执行搜索****//
                showColumns:true,//显示列刷选
                 searchAlign:"right",
                 smartDisplay:true,
                rowAttributes: function (row, index) {
                return {
                    'data-toggle': 'popover',
                    'data-placement': 'bottom',
                    'data-trigger': 'hover',
                    'data-index': index,
                    'title': [
                        'Index: ' + index,
                        '职位名: ' + row.name
                    ].join(', ')
                }
            }
			});
          $(".jobTableDiv").hide();
    }
    )
//重新加载表格数据
function reloadData(jobList) {
        $('#table').bootstrapTable('load', jobList);
         $(".jobTableDiv").show();
  }

</script>
</body>
</html>
